<script setup lang="ts">
import { ref } from 'vue'
import productsData from '@/db/products.json'
import { useCartStore } from '@/stores/CartStorage'

interface Product {
  id: number
  name: string
  price: number
  description: string
  path: string
}

const products = ref<Product[]>(productsData)
const cartStore = useCartStore()

const handleAddToCart = (product: Product) => {
  cartStore.addToCart({
    id: product.id,
    name: product.name,
    price: product.price,
    description: product.description
  })
}
</script>

<template>
  <div class="products-container">
    <div class="products-grid">
      <div v-for="product in products" :key="product.id" class="product-card">
        <img :src="product.path" :alt="product.name" class="product-image" />
        <h3 class="product-name">{{ product.name }}</h3>
        <p class="product-price">¥{{ product.price }}</p>
        <div class="description-row">
          <p class="product-description">{{ product.description }}</p>
          <button class="add-to-cart-btn" @click="handleAddToCart(product)">加入</button>
        </div>
      </div>
    </div>
  </div>
</template>